<template>
  <div class="app-container">
    <el-card shadow="never">
      <svg-icon icon-class="fork_me" class="fork_me" />
      <el-form ref="form" :model="form" label-position="left" label-width="180px">
        <el-row :gutter="48" class="flex">
          <el-col :xs="24" :sm="12">
            <el-form-item label="选择框（单选、字典）：" prop="sex">
              <select-dict-tag v-model="form.sex" dict-code="sys_user_sex" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.sex }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选择框（多选、字典）：" prop="follow_mode">
              <select-multi-tag v-model="form.follow_mode" dict-code="crm_follow_mode" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.follow_mode }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="单选框（字典）：" prop="job_group">
              <select-dict-tag v-model="form.job_group" dict-code="sys_job_group" type="radio" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.job_group }}</span>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12">
            <el-form-item label="多选框（字典）：" prop="transportation">
              <select-multi-tag v-model="form.transportation" dict-code="crm_transportation" type="checkbox" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.transportation }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="单选按钮（字典）：" prop="job_status">
              <select-dict-tag v-model="form.job_status" dict-code="sys_job_status" type="radioButton" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.job_status }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="多选按钮（字典）：" prop="notice_type">
              <select-multi-tag v-model="form.notice_type" dict-code="sys_notice_type" type="checkboxButton" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.notice_type }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="根据部门选择用户" prop="userIds">
              <select-user-by-dept v-model="form.userIds" multi />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="选中值（v-model）：">
              <span>{{ form.userIds }}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="可拖拽弹框：">
              <el-button @click="dialog.open = true">Dialog</el-button>
              <zrk-drag-dialog :title="dialog.title" :width="dialog.width" :show.sync="dialog.open" :is-footer="true">
                <template slot="body">
                  这是一个可以拖拽、最大化、最小化的弹框！
                </template>
              </zrk-drag-dialog>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="导入数据弹框：">
              <el-button icon="el-icon-upload" @click="upload.open = true">Upload</el-button>
              <zrk-upload :show.sync="upload.open" title="数据导入" :import-url="upload.importUrl" :template-url="upload.templateUrl" width="750" :accept="upload.accept" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="小圆点：">
              <span v-for="item in dot" :key="item.id" style="padding: 0 12px 0 0;">
                <el-dot :type="item.type" style="margin: 0 4px 0 0;" />
                {{ item.text }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ZrkDragDialog from '@/components/Zrk/ZrkDragDialog'
import SelectUserByDept from '@/components/Zrk/SelectUserByDept'
export default {
  name: 'SelectDemo',
  components: { ZrkDragDialog, SelectUserByDept },
  data() {
    return {
      form: {
        sex: '1',
        follow_mode: '11,21,31',
        job_group: 'DEFAULT',
        transportation: '1,11',
        job_status: '0',
        notice_type: '1,2',
        userIds: ''
      },
      // 可拖拽弹框
      dialog: {
        title: '可拖拽弹框',
        open: false,
        width: '780px'
      },
      // 导入
      upload: {
        open: false,
        importUrl: '/system/user/importData',
        templateUrl: '/system/user/importTemplate',
        accept: '.xls,.xlsx'
      },
      dot: [
        {
          id: '1',
          type: 'primary',
          text: '运行中'
        },
        {
          id: '2',
          type: 'success',
          text: '启用'
        },
        {
          id: '3',
          type: 'warning',
          text: '停用'
        },
        {
          id: '4',
          type: 'error',
          text: '禁用'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.fork_me {
  font-size: 6rem;
  position: absolute;
  top: 16px;
  right: 24px;
}
</style>

